<template>
  <div class="columns is-mobile is-centered">
    <div class="column is-one-quarter-widescreen">
      <oolongLogin @on-click="login"
                   :titleName="titleName">
        <template slot="prompt">
          <span class="oolong-Prompt" v-show="prompt.show">{{ prompt.error }}</span>
        </template>
        <template slot="captcha">
          <span class="oolong-code-information">请输入验证码</span>
          <input class="oolong-code input" id="kaptcha" type="text"
                 v-model="captcha"
                 maxlength="6" @focus="resetPrompt"/>
          <!--@keyup.13="login"-->
          <img class="oolong-code-img" :src="isVerificationCode"
               title="点击切换验证码" @click="changeCode"/>
        </template>
      </oolongLogin>
    </div>
  </div>
</template>
<script>
import oolongLogin from '../components/oolong-login.vue'

export default {
  components: {
    oolongLogin
  },
  props: {
    domain: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 登录验证
      loginInterface: '/sso/web/verify',
      titleName: 'oolong登陆系统',
      captchaKaptchaImageUrl: '/captcha/getKaptchaImage?',
      // 验证码
      getKaptchaImage: '',
      captcha: '',
      prompt: {
        show: false,
        error: ''
      },
      // loading状态
      isShow: false
    }
  },
  computed: {
    // 验证码显示
    isVerificationCode: function () {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.getKaptchaImage = this.domain + '/boot' + this.captchaKaptchaImageUrl;
      return this.getKaptchaImage + Math.floor(Math.random() * 100);
    }
  },
  methods: {
    login(arg) {
      alert(arg.username + '----' + arg.password);
      this.$router.push({name: 'Main'})
    },
    // 刷新验证码
    changeCode: function () {
      this.getKaptchaImage = 'new';
    },
    // 隐藏提示信息
    resetPrompt() {
      this.prompt.show = false;
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
